@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/info_edit.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/suppliermy/store.css')}}">

@section('content')
<div class="mainHrContent" id="hrInfodetails">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>

                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 店铺管理中心

            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click="window.location.href ='{{ route('home.demand.demandAdd')}}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrInfodetailss">
            <div class="basicInfo_title">
                <span></span>
                店铺管理中心 > @{{storeId==''?'修改':'添加'}}
            </div>
            <div class="userDetails">
                <p style="align-items: flex-start;">
                    <span class="details_title">LOGO：</span>
                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccessimg" :before-upload="beforeAvatarUpload">
                        <img v-if="storeData.logo" :src="storeData.logo" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </p>
                <p>
                    <span class="details_title">店铺名称：</span>
                    <el-input v-model="storeData.store_name"></el-input>
                </p>
                <p>
                    <span class="details_title">公司地址：</span>
                    <el-input v-model="storeData.area_info"></el-input>
                </p>
                <p>
                    <span class="details_title">服务区域：</span>
                    <el-select v-model="storeData.service_area" filterable clearable>
                        <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </p>
                <p>
                    <span class="details_title">擅长领域：</span>
                    <el-cascader v-model="storeData.cid" :options="cateData" :props="props" clearable></el-cascader>
                </p>

                <p>
                    <span class="details_title">服务时间：</span>
                    <!-- 选择时间 -->
                    <el-time-picker format="HH:mm:ss" value-format="HH:mm:ss" style="width:400px;padding:0px 10px;" size="mini" is-range v-model="storeData.workingtime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                </p>
                <p style="align-items:end">
                    <span class="details_title">公司简介：</span>
                    <textarea placeholder="" v-model="storeData.description">
                    </textarea>
                </p>
                <p style="align-items:flex-end">
                    <span class="details_title">图片展示：</span>
                    <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove" :on-error='handleErro' :on-success="handleAvatarSuccess" list-type="picture" :file-list="storeData.image">
                        <span class="addPicture">
                            <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                            添加图片
                        </span>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                    </el-upload>
                </p>
                <p style="align-items:baseline">
                    <span class="details_title">服务内容：</span>
                    <span>
                        <el-tag :key="tag" v-for="tag in servicesData" closable :disable-transitions="false" @close="handleCloseServices(tag)">
                            @{{tag.title}}
                        </el-tag>
                        <span class="addDialog" @click="dialogVisible=true">
                            <img src="{{URL::asset('./img/icon/addDialog.png')}}">
                            添加服务内容
                        </span>
                    </span>

                </p>
                <p style="align-items:baseline">
                    <span class="details_title">案例展示：</span>
                    <span>
                        <el-tag :key="tag" v-for="(tag,index) in casesData" closable :disable-transitions="false" @close="handleCloseCeses(tag)">
                            @{{tag.title}}
                        </el-tag>
                        <span class="addDialog" @click="dialogVisible1=true">
                            <img src="{{URL::asset('./img/icon/addDialog.png')}}">
                            添加案例内容
                        </span>
                    </span>
                </p>
                <p style="align-items:flex-end">
                    <span class="details_title">合作伙伴：</span>
                    <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove2" :on-error='handleErro' :on-success="handleAvatarSuccess2" list-type="picture" :file-list="storeData.partners">
                        <span class="addPicture">
                            <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                            添加图片
                        </span>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                    </el-upload>
                </p>
                <button @click="submitStore">保存</button>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    添加服务内容
                    <a class="dialogFalse" @click="dialogVisible=false">×</a>
                </div>
                <div class="dialogMain">
                    <p>
                        <span class="details_title">服务标题：</span>
                        <el-input v-model="servicesForm.title"></el-input>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">标题图片：</span>
                        <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload" :show-file-list="false">
                            <img v-if="servicesForm.imageUrl" :src="servicesForm.imageUrl" class="avatar">
                            <span class="dialogUpload" v-else>
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">
                                </span>
                                <span>文件需为：
                                    jpg/png格式</span>
                            </span>
                        </el-upload>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">内容详情：</span>
                        <span class="feedback_addMain">
                            <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove3" :on-error='handleErro' :on-success="handleAvatarSuccess3" list-type="picture" :file-list="servicesForm.contentImg">
                                <span class="addPicture" style="margin-bottom:20px;">
                                    <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                    添加图片
                                </span>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                            </el-upload>
                            <textarea v-model="servicesForm.content" placeholder="请具体描述您的建议">
                </textarea>
                        </span>
                    </p>
                    <button class="dialogButton" @click="serviceClick">发送</button>
                </div>
            </el-dialog>
            <el-dialog :visible.sync="dialogVisible1" width="800px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    添加案例
                    <a class="dialogFalse" @click="dialogVisible1=false">×</a>
                </div>
                <div class="dialogMain">
                    <p>
                        <span class="details_title">服务标题：</span>
                        <el-input v-model="casesForm.title"></el-input>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">标题图片：</span>
                        <el-upload class="upload-demo" :action="uploadUrl" :on-success="handleAvatarSuccess5" :before-upload="beforeAvatarUpload" :show-file-list="false">
                            <img v-if="casesForm.imageUrl" :src="casesForm.imageUrl" class="avatar">
                            <span class="dialogUpload" v-else>
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">
                                </span>
                                <span>文件需为：
                                    jpg/png格式</span>
                            </span>
                        </el-upload>
                    </p>
                    <p style="align-items:flex-start">
                        <span class="details_title">内容详情：</span>
                        <span class="feedback_addMain">
                            <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove6" :on-error='handleErro' :on-success="handleAvatarSuccess6" list-type="picture" :file-list="casesForm.contentImg">
                                <span class="addPicture" style="margin-bottom:20px;">
                                    <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                    添加图片
                                </span>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                            </el-upload>
                            <textarea v-model="casesForm.content" placeholder="请具体描述您的建议">
                </textarea>
                        </span>
                    </p>
                    <button class="dialogButton" @click="casesClick">发送</button>
                </div>
            </el-dialog>
        </div>
    </div>

</div>
<style>

</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrInfodetails = new Vue({
            el: '#hrInfodetailss',
            data: () => {
                return {
                    storeId: getQueryString("id") || '',
                    areaData: [],
                    cateData: [],
                    storeData: {
                        logo: "",
                        store_name: '',
                        area_info: '',
                        service_area: '',
                        cid: [],
                        workingtime: ['00:00:00', '23:59:59'],
                        description: '',
                        image: [],
                        partners: [],
                    },
                    servicesForm: {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    },
                    servicesData: [],
                    casesForm: {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    },
                    casesData: [],
                    props: {
                        multiple: true
                    },

                    imageUrl4: '',
                    imageUrl5: '',
                    uploadUrl: UPLOAD_FILE,
                    dynamicTags: ['OA办公系统', 'IT服务外包', '档案管理系统'],
                    inputVisible: false,
                    dialogVisible: false,
                    dialogVisible1: false,
                    inputValue: '',
                    // fileList: [],
                    // fileList2: [],
                    fileList3: [],
                    fileList6: [],
                }
            },
            created() {
                this.getArea();
                this.getCates();
                if (getQueryString("id")) {
                    this.getStore();
                }
            },
            mounted() {},
            methods: {
                getArea() {
                    let data = {}
                    apiAjax("{{ route('home.public.areas')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.areaData = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getStore() {
                    let data = {}
                    this.servicesData = [];
                    this.casesData = [];

                    apiAjax("{{ route('home.user.supplierStoreApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.storeData = res.data;
                            this.storeData.image =res.data.image;
                            this.storeData.partners = res.data.partners;
                            this.storeData.services.forEach(element => {
                                this.servicesData.push({
                                    title: element.title,
                                    imageUrl: element.thumb,
                                    contentImg:element.images,
                                    content: element.content
                                })
                            });
                            this.storeData.cases.forEach(element => {
                                this.casesData.push({
                                    title: element.title,
                                    imageUrl: element.thumb,
                                    contentImg:element.images,
                                    content: element.content
                                })
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getCates() {
                    let data = {
                        type: 4
                    }
                    apiAjax("{{ route('home.public.category')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.cateData = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitStore() {
                    let imgs=[];
                    let partners=[];
                    this.storeData.image.forEach(element => {
                        if(element.url){
                            imgs.push(element.url)
                        }else{
                            imgs.push(element)
                        }
                    });
                    this.storeData.partners.forEach(element => {
                        if(element.url){
                            partners.push(element.url)
                        }else{
                            partners.push(element)
                        }
                    });
                            let data = {
                        logo: this.storeData.logo,
                        cid: JSON.stringify(this.storeData.cid),
                        store_name: this.storeData.store_name,
                        area_info: this.storeData.area_info,
                        workingtime: this.storeData.workingtime.join(),
                        service_area: this.storeData.service_area,
                        description: this.storeData.description,
                        // image: this.storeData.image.join(),
                        image: imgs.join(),
                        partners: partners.join(),
                        // partners: this.storeData.partners.join(),
                        case: JSON.stringify(this.casesData),
                        service: JSON.stringify(this.servicesData),
                    };

                    debugger
                    apiAjax("{{ route('home.user.supplierStoreUpdateApi')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            window.location.href = "{{ route('home.suppliermy.supplierStore') }}";
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                serviceClick() {
                    this.servicesData.push(this.servicesForm);
                    this.dialogVisible = false;
                    this.servicesForm = {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    };
                },
                handleCloseServices(item) {
                    this.servicesData.forEach((element, index) => {
                        if (element.title == item.title) {
                            this.servicesData.splice(index, 1)
                        }
                    });
                },
                casesClick() {
                    this.casesData.push(this.casesForm);
                    this.dialogVisible1 = false;
                    this.casesForm = {
                        title: "",
                        imageUrl: "",
                        content: '',
                        contentImg: [],
                    };
                },
                handleCloseCeses(item) {
                    this.casesData.forEach((element, index) => {
                        if (element.title == item.title) {
                            this.casesData.splice(index, 1)
                        }
                    });
                },


                // 文件上传
                handleAvatarSuccessimg(res, file) {
                    this.storeData.logo = file.response.data.path;
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/png 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleClose() {
                    this.dialogVisible = false;
                    this.dialogVisible1 = false;
                },
                handleErro() {
                    this.$message.error('上传失败');
                },
                handleAvatarSuccess(res, file) {
                    this.storeData.image.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    this.storeData.image = [];
                    fileList.forEach(element => {
                        this.storeData.image.push(element.response.data.path)
                    });
                },
                handleAvatarSuccess2(res, file) {
                    this.storeData.partners.push(res.data.path)
                },
                handleRemove2(file, fileList) {
                    this.storeData.partners = [];
                    fileList.forEach(element => {
                        this.storeData.partners.push(element.response.data.path)
                    });
                },

                handleAvatarSuccess3(res, file) {
                    this.servicesForm.contentImg.push(res.data.path)
                },
                handleRemove3(file, fileList) {
                    this.servicesForm.contentImg = [];
                    fileList.forEach(element => {
                        this.servicesForm.contentImg.push(element.response.data.path)
                    });
                },
                handleAvatarSuccess6(res, file) {
                    this.casesForm.contentImg.push(res.data.path)
                },
                handleRemove6(file, fileList) {
                    this.casesForm.contentImg = [];
                    fileList.forEach(element => {
                        this.casesForm.contentImg.push(element.response.data.path)
                    });
                },

                handleAvatarSuccess4(res, file) {
                    this.servicesForm.imageUrl = file.response.data.path;
                },
                handleAvatarSuccess5(res, file) {
                    this.casesForm.imageUrl = file.response.data.path;
                },
            }
        })
    })
</script>
@endsection